import { size, IFormProps, pageSize, dateTimeFormat, dateFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select, DatePicker, Tabs, message } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
const TabPane = Tabs.TabPane;

export interface IOrdersPros extends IFormProps {
    order: any
}
class Orders extends React.PureComponent<IOrdersPros, any>{
    constructor(props) {
        super(props);
    }

    state = {
        beginTime: '',
        endTime: '',
        visible: false,
        status: '',
        tabonePageIndex: 1,
        tabtwoPageIndex: 1,
        tabthreePageIndex: 1,
        tabfourPageIndex: 1,
        tabfivePageIndex: 1,
        tabsixPageIndex: 1
    }

    componentDidMount() {
        this.getStores();
    }


    getStores = () => {
        this.props.dispatch({
            type: "order/getStores",
            payload: {
                callback: () => {
                    this.search();
                }
            }
        });
    }

    search = () => {
        this.getTreeOrders({ pageIndex: 1 });
    }

    getTreeOrders = (payload?) => {
        const { beginTime, endTime } = this.state;
        payload = Object.assign({},
            this.props.order.treeorderSearchs,
            this.props.form.getFieldsValue(),
            { beginTime, endTime },
            { ...payload });
        this.props.dispatch({
            type: "order/getTreeOrders",
            payload
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    onChange = (date, dateString) => {
        this.setState({ beginTime: dateString[0], endTime: dateString[1] });
    }

    onStatusChange = (status) => {
        let pageIndex = 1;
        this.state.status = status;
        switch(status)
        {
            case '1':pageIndex = this.state.tabtwoPageIndex;
            break;
            case '2':pageIndex = this.state.tabthreePageIndex;
            break;
        }
        let payload = Object.assign({}, { status, pageIndex });
        this.getTreeOrders(payload);
    }

    OnPayTypeChange = (payType) => {
        let payload = Object.assign({}, { payType });
        this.getTreeOrders(payload);
    }

    setOrderSentCancel = () => {
        this.setState({ visible: false });
    }

    storeChange = (storeId) => {
        let payload = Object.assign({}, { storeId }, { pageIndex: 1 })
        this.state.tabtwoPageIndex = 1;
        this.getTreeOrders(payload);
    }
    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const {
            storeId,
            order,
            treeorders: { totalCount, items },
            treeorderSearchs: { pageIndex, pageSize },
            stores: { items: stores }, } = this.props.order;

        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.order.treeorderSearchs,
                { pageIndex, pageSize });
            switch (this.state.status) {
                case '': this.state.tabonePageIndex = pageIndex;
                    break;
                case '2': this.state.tabthreePageIndex = pageIndex;
                    break;
            }
            this.getTreeOrders(payload);
        }
        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Form layout="inline">
                            <Form.Item label='请选择店铺'>
                                {getFieldDecorator('storeId', {
                                    initialValue: storeId
                                })(
                                    <Select style={{ width: 120 }} onChange={this.storeChange}>
                                        {
                                            stores.map((store: api.SingleUserMallStoresVOStoreVO) => {
                                                return <Select.Option value={store.id}>{store.name}</Select.Option>
                                            })
                                        }
                                    </Select>)}
                            </Form.Item>
                            <Form.Item label='订单号'>
                                {getFieldDecorator('orderNo', {
                                })(<Input size={size}
                                    placeholder="请输入订单号" />)}
                            </Form.Item>
                            <Form.Item label='购买人手机号'>
                                {getFieldDecorator('receiverPhone', {
                                })(<Input size={size}
                                    placeholder="请输入购买人手机号" />)}
                            </Form.Item>
                            <Form.Item label='支付时间'>
                                {getFieldDecorator('time', {
                                })(<DatePicker.RangePicker onChange={this.onChange}
                                    format={dateFormat} />)}
                            </Form.Item>
                            <Form.Item label='支付来源'>
                                {getFieldDecorator('payType', {
                                })(<Select style={{ width: 120 }} onChange={this.OnPayTypeChange}>
                                    <Select.Option value=''>全部</Select.Option>
                                    <Select.Option value='1'>微信公众号</Select.Option>
                                    <Select.Option value='6'>佣金支付</Select.Option>
                                    <Select.Option value='7'>体验金支付</Select.Option>
                                    <Select.Option value='5'>微信APP</Select.Option>
                                    <Select.Option value='2'>支付宝App</Select.Option>
                                </Select>)}
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>订单列表 (共 {totalCount} 条)</h3>
                        </Col>
                        <Col span={24}>
                            <Tabs defaultActiveKey="" onChange={this.onStatusChange}>
                            <TabPane tab="待付款" key="1"></TabPane>
                            <TabPane tab="已付款" key="2"></TabPane>
                            </Tabs>
                            {totalCount > 0 ? <Table
                                dataSource={items}
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallOrdersVOOrderDividendMiniVO) => String(record.id)}
                                loading={loading}
                                bordered
                                defaultExpandAllRows
                                rowClassName={(record, index) => index % 2 === 0 ? Styles.BackGroundColor1 : Styles.BackGroundColor2}
                                expandedRowRender={(record: api.SingleUserMallOrdersVOOrderDividendMiniVO) =>
                                    <Table
                                        dataSource={record.orderDetails}
                                        pagination={false}
                                        bordered
                                        rowKey={(detail: api.SingleUserMallOrdersVOOrderDetailVO) => String(detail.id)}
                                        loading={loading}>
                                        <Table.Column title="期数" key="numberPeriods" dataIndex="numberPeriods" className={Styles.redColor} />
                                        <Table.Column title="商品名称" key="name" dataIndex="name" width="50%" />
                                        <Table.Column title="商品图片" key="picture" render={(text, detail: api.SingleUserMallOrdersVOOrderDetailVO, index) => {
                                            return <img width='100px' src={detail.picture} />
                                        }} />
                                        <Table.Column title="规格" key="spec" dataIndex="spec" className={Styles.redColor} />
                                        <Table.Column title="数量" key="qty" dataIndex="qty" className={Styles.redColor} />
                                        <Table.Column title="期限（月）" key="timelimit" dataIndex="timelimit" className={Styles.redColor} />
                                        <Table.Column title="年分红利润(%)" key="dividendAmountViewByYear" dataIndex="dividendAmountViewByYear" className={Styles.redColor} />
                                        <Table.Column title="状态" key="dividendItemStatus" render={(text, record: api.SingleUserMallOrdersVOOrderDetailVO, index) => {
                                            return Number(record.dividendTypes) == 0 ? '现金分红' : ''
                                        }} />
                                        <Table.Column title="分红天数" key="dividendDay" dataIndex="dividendDay" className={Styles.redColor} />
                                        <Table.Column title="分红收益" key="profit" dataIndex="profit" className={Styles.redColor} />
                                    </Table>}>
                                <Table.Column title="订单编号" key="orderNo" dataIndex="orderNo" />
                                <Table.Column title="购买人" key="purchaser" dataIndex="purchaser" />
                                <Table.Column title="购买人电话" key="purchaserPhone" dataIndex="purchaserPhone" />
                                <Table.Column title="支付总额" key="actualAmount" dataIndex="actualAmount" className={Styles.redColor} />
                                <Table.Column title="状态" key="dividendItemStatus" render={(text, record: api.SingleUserMallOrdersVOOrderDividendMiniVO, index) => {
                                    return Number(record.dividendItemStatus) == 1 ? '分红中' : Number(record.dividendItemStatus) == 2 ? '分红完成' : ''
                                }} />
                            </Table> : ""}
                        </Col>
                    </Col>
                </Row>
            </Row>)
    }
}

export default connect(({ order, loading: { models: { order: loading } } }) => ({ order, loading }))(Form.create()(Orders));
